Space above cards: <input type="number" [formControl]="topHeightCtrl">
<div [style.height.px]="topHeightCtrl.value"></div>
<div class="demo-autocomplete">
  <md-card>
    Reactive Length: {{ reactiveStates.length }}
    <div>Reactive value:{{stateCtrl.value}}</div>
    <div>Reactive dirty:{{stateCtrl.dirty}}</div>

    <md-form-field floatPlaceholder="never">
      <input mdInput placeholder="State" [mdAutocomplete]="reactiveAuto">
      <md-autocomplete #reactiveAuto="mdAutocomplete" [displayWith]="displayFn">
        <md-option *ngFor="let state of reactiveStates | async" [value]="state">
          <span>{{ state.name }}</span>
          <span class="demo-secondary-text"> ({{state.code}}) </span>
        </md-option>
      </md-autocomplete>
    </md-form-field>

    <md-card-actions>
      <button md-button (click)="stateCtrl.reset()">RESET</button>
      <button md-button (click)="stateCtrl.setValue(states[10])">SET VALUE</button>
      <button md-button (click)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()">
        TOGGLE DISABLED
      </button>
    </md-card-actions>
  </md-card>

  <md-card>
    <div>Template-Driven value (currentState): {{currentState}}</div>
    <div>Template-Driven dirty: {{modelDir? modelDir.dirty: false}}</div>

    <md-form-field *ngIf="true">
      <input mdInput palaceholder="State" [mdAutocomplete]="tdAuto" [(ngModel)]="currentState"
        (ngModelChange)="tdStates = filterStates(currentState)" [disabled] = "tdDisabled"
      >
      <md-autocomplete #tdAuto="mdAutocomplete">
        <md-option *ngFor="let state of tdStates" [value]="state.name">
          <span>{{state.name}}</span>
        </md-option>
      </md-autocomplete>
    </md-form-field>

    <md-card-actions>
      <button md-button (click)="currentState=''">RESET</button>
      <button md-button (click)="currentState='California'">SET VALUE</button>
      <button md-button (click)="tdDisabled=!tdDisabled">TOGGLE DISABLED</button>
    </md-card-actions>

  </md-card>

  <md-card>
    <div>Option groups (currentGroupedState): {{currentGroupedState}}</div>

    <md-input-container>
      <input mdInput placeholder="State"
             [(ngModel)]="currentGroupedState"
             (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)"
             [mdAutocomplete]="groupedAuto"
      >
    </md-input-container>
  </md-card>

  <md-autocomplete #groupedAuto="mdAutocomplete">
    <md-optgroup *ngFor="let group of filteredGroupedStates"
                 [label]="'States starts with ' + group.letter"
      >
      <md-option *ngFor="let state of group.states" [value]="state.name">
        {{state.name}}
      </md-option>
    </md-optgroup>
  </md-autocomplete>
</div>
